<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<rich:panel>
		<f:facet name="header">
			<h:outputText
				value="Welcome #{sessionScope.loggedInMember.memberName}, Your Team Plan" />
		</f:facet>
		<h:form>
		<rich:dataTable id="teamPlanTable"  cellpadding="0" cellspacing="0" 
                     value="#{teamPlanBean.members}" border="0" var="member" width="100%">
			<f:facet name="header">
				<rich:columnGroup>
					<rich:column style="width:8%;">
						<h:outputText value="Member ID" />
					</rich:column>
					<rich:column style="width:10%;">
						<h:outputText value="Name" />
					</rich:column>
					<rich:column style="width:25%;">
						<h:outputText value="Responsibilities" />
					</rich:column>
					<rich:column>
						<h:outputText value="Accomplishments/ Plans" />
					</rich:column>	
					<rich:column style="width:5%" rendered="#{sessionScope.loggedInMember.memberType == 'admin'}">
						<h:outputText value="Actions" />
					</rich:column>							
				</rich:columnGroup>
			</f:facet>


			<rich:column>				
				<h:outputText value="#{member.memberId}"></h:outputText>
			</rich:column>	
			<rich:column>				
				<h:outputText value="#{member.memberName}"></h:outputText>
			</rich:column>	
			<rich:column>				
				<rich:dataList var="responsibility" value="#{member.responsibilities}"
					rows="10">
					<h:outputText value="#{responsibility.responsibilityDescription}" />					
				</rich:dataList>				
			</rich:column>
			<rich:column>
				<rich:dataList var="accomplishment"
					value="#{member.accomplishments}" rows="10">
					<h:outputText value="#{accomplishment.monthStr}" />
					<rich:separator height="2"></rich:separator>
					<rich:dataList var="accomplishmentDetail"
						value="#{accomplishment.accomplishmentDetails}">						
						<h:outputText value="#{accomplishmentDetail}" />
					</rich:dataList>
				</rich:dataList>
			</rich:column>

			<rich:column rendered="#{sessionScope.loggedInMember.memberType == 'admin'}">				
				<a4j:commandLink id="editlink" 
					actionListener="#{memberBean.setMemberBeanInSession}" reRender="editPanel" oncomplete="#{rich:component('editPanel')}.show()">
					<f:param name="memberId" value="#{member.memberId}" />
					<h:graphicImage value="/images/edit.png" style="border:0" />					
				</a4j:commandLink>
				<rich:toolTip for="editlink" value="Edit this Member" />
				<a4j:commandLink id="deletelink" 
					actionListener="#{memberBean.setMemberBeanInSession}" reRender="deletePanel" oncomplete="#{rich:component('deletePanel')}.show()">
					<f:param  name="memberId" value="#{member.memberId}" />
					<h:graphicImage value="/images/delete.png" style="border:0" />					
				</a4j:commandLink>
				<rich:toolTip for="deletelink" value="Delete this Member" />
				<a4j:commandLink id="addlink" 
					actionListener="#{memberBean.setMemberBeanInSession}" reRender="addPanel" oncomplete="#{rich:component('addPanel')}.show()">
					<f:param  name="memberId" value="#{member.memberId}" />
					<h:graphicImage value="/images/add.png" style="border:0" />					
				</a4j:commandLink>
				<rich:toolTip for="addlink" value="Add Monthly Plan" />
			</rich:column>
		</rich:dataTable>
		<table>
		<tr>
			<td></td>
			<td>
				<a4j:commandButton value="Add a New Member" ajaxSingle="true" id="addButton" 
				oncomplete="#{rich:component('addMemberPanel')}.show()" rendered="#{sessionScope.loggedInMember.memberType == 'admin'}"> 
				</a4j:commandButton>
			</td>			
		</tr>
		</table>
		</h:form>
	</rich:panel>
	
		
	<!-- Edit Panel -->
	<h:form>	
	<rich:modalPanel id="editPanel" autosized="true" width="450">
		<f:facet name="header">
			<h:outputText value="Edit Member" />
		</f:facet>	
		
		Edit Member Details:<br/><br/>
		<table>	
			<tr>
				<td><h:outputText>Member Id: </h:outputText> </td>
				<td><h:inputText value="#{memberBean.memberId}"></h:inputText></td>				
			</tr>
			<tr>
				<td><h:outputText>Member Name: </h:outputText> </td>
				<td><h:inputText value="#{memberBean.memberName}"></h:inputText></td>				
			</tr>
			<tr>
				<td><h:outputText>Responsibilities: </h:outputText> </td>
				<td>
				<h:inputTextarea rows="5" cols="60" value="#{memberBean.responsibilitiesStr}"></h:inputTextarea>	
				</td>						
			</tr>			
		</table>		
		
		 <h:commandButton value="Submit" action="#{memberBean.editMember}" onclick="Richfaces.hideModalPanel('editPanel');" />		 	
		 
        <rich:spacer width="50px" />
        <h:commandButton value="Cancel" onclick="Richfaces.hideModalPanel('editPanel');"/>	
	</rich:modalPanel>
	</h:form>
	<!-- Delete Panel -->
	<h:form>
	<rich:modalPanel id="deletePanel" autosized="true" width="450">
		<f:facet name="header">
			<h:outputText value="Delete Member" />
		</f:facet>	
		Are you sure you want to delete this member?<br/><br/>
		<b><h:outputText value="#{memberBean.memberId} - #{memberBean.memberName}"></h:outputText> </b><br/><br/>
		
		 <h:commandButton value="Submit" action="#{memberBean.deleteMember}" onclick="Richfaces.hideModalPanel('deletePanel');"/>
        <rich:spacer width="50px" />
        <h:commandButton value="Cancel" onclick="Richfaces.hideModalPanel('deletePanel');"/>	
	</rich:modalPanel>
	</h:form>
	
	<!-- Add Monthly Plan Panel -->
	<h:form>
	<rich:modalPanel id="addPanel" autosized="true" width="200">
		<f:facet name="header">
			<h:outputText value="Add Monthly Plan" />
		</f:facet>	
		Add Plan for <b><h:outputText value="#{memberBean.memberId} - #{memberBean.memberName}"></h:outputText></b> for the month  <b><h:outputText value="#{memberBean.monthStr}' #{memberBean.nextYear}"></h:outputText></b>
		<br/><br/>
		<h:inputTextarea rows="20" cols="80" value="#{memberBean.accomplishmentStr}"></h:inputTextarea>	
		 <br/><br/>		
		 <h:commandButton value="Submit" action="#{memberBean.addMonthlyPlan}" onclick="Richfaces.hideModalPanel('addPanel');"/>
        <rich:spacer width="50px" />
        <h:commandButton value="Cancel" onclick="Richfaces.hideModalPanel('addPanel');"/>	
	</rich:modalPanel>
	</h:form>
	
	<!-- Add Member Panel -->
	<h:form>
	<rich:modalPanel id="addMemberPanel" autosized="true" width="600" >
		<f:facet name="header">
			<h:outputText value="Add a new member" />
		</f:facet>	
		Please provide below information:<br/><br/>
		<table>	
			<tr>
				<td><h:outputText>Member Id: </h:outputText> </td>
				<td><h:inputText value="#{memberBean.memberId}"></h:inputText></td>				
			</tr>
			<tr>
				<td><h:outputText>Member Name: </h:outputText> </td>
				<td><h:inputText value="#{memberBean.memberName}"></h:inputText></td>				
			</tr>
			<tr>
				<td><h:outputText>Responsibilities </h:outputText> </td>
				<td>
				<h:inputTextarea rows="5" cols="60" value="#{memberBean.responsibilitiesStr}"></h:inputTextarea>
				</td>							
			</tr>			
		</table>		
		 <h:commandButton value="Submit" action="#{memberBean.addMember}" onclick="Richfaces.hideModalPanel('addMemberPanel');"/>
        <rich:spacer width="50px" />
        <h:commandButton value="Cancel" onclick="Richfaces.hideModalPanel('addMemberPanel');"/>	
	</rich:modalPanel>
	</h:form>

